<script setup>
import {ref} from 'vue'
import {useStore} from 'vuex'

const store = useStore();
let config = [];
const configs = ref([
    {
        title:"1 查看代码执行开销（CYCLE）",
        value:[0],
        explanation:"查看代码执行开销",
        enable:true,
        isChecked:false
    },
    {
        title:"2 查看指令缓存MISS次数",
        value:[0, 0xff, 0xff, 0xff, 0],
        explanation:"查看指令缓存MISS次数对代码执行开销的影响",
        enable:true,
        isChecked:false
    },
    {
        title:"3 查看GLOBAL内存访问次数",
        value:[0, 0xff, 0xff, 0xb],
        explanation:"查看GLOBAL内存访问次数对代码执行开销的影响",
        enable:true,
        isChecked:false
    },
    {
        title:"4 查看DMA数据搬运",
        value:[0, 0xff, 0x11, 0x11, 0x11],
        explanation:"查看Global内存与SPM内存之间进行数据搬运对代码执行开销的影响，使用memcpy接口族，broadcast接口族以及转置接口族完成数据从Global内存与SPM内存之间进行数据搬运时触发。",
        enable:true,
        isChecked:false
    },
    {
        title:"5 查看RMA数据搬运",
        value:[0, 0xff, 0x12, 0x12, 0x12],
        explanation:"查看同一SPA内不同SPE的SPM之间进行数据搬运对代码执行开销的影响，使用rma接口族，broadcast接口族完成数据从SPM内存与SPM内存之间进行数据搬运时触发。",
        enable:true,
        isChecked:false
    },
    {
        title:"6 查看DMA数据搬运和RMA数据搬运",
        value:[0, 0xff, 0x10],
        explanation:"查看同一SPA内Global内存与SPM内存之间进行数据搬运以及不同SPE的SPM之间进行数据搬运对代码执行开销的影响",
        enable:true,
        isChecked:false
    },
    {
        title:"7 查看SPM访问次数",
        value:[0, 0xff, 0x8],
        explanation:"查看SPM访问次数对代码执行开销的影响",
        enable:true,
        isChecked:false
    },
    {
        title:"8 查看特定向量指令执行数量",
        value:[0, 0xff, 0xff, 0xff, 0xff, 0xff, 0xd, 0xe, 0xd],
        explanation:"查看特定向量指令执行数量对代码执行开销的影响，使用simd_load/simd_store/simd_loadu/simd_storeu的次数",
        enable:true,
        isChecked:false
    }
]);
const CheckStatus = (status, id) => {
    let findIndex = config.indexOf(id);
    if (status == true && findIndex == -1) {
        config.push(id);
    } else if (status == false && findIndex != -1) {
        config.splice(findIndex, 1);
    }
    // console.log(config);
    let allconfig = [];
    // 恢复正常状态
    for (let config of configs.value) {
        config.enable = true;
    }
    for (let index of config) {
        allconfig.push(configs.value[index].value);
        if (index == 0 || index == 7) {
            continue;
        } else if (index == 1) {
            configs.value[3].enable = false;
            configs.value[4].enable = false;
        } else if (index == 2) {
            configs.value[3].enable = false;
            configs.value[4].enable = false;
        } else if (index == 3) {
            configs.value[1].enable = false;
            configs.value[2].enable = false;
            configs.value[4].enable = false;
            configs.value[5].enable = false;
            configs.value[6].enable = false;
        } else if (index == 4) {
            configs.value[1].enable = false;
            configs.value[2].enable = false;
            configs.value[3].enable = false;
            configs.value[5].enable = false;
            configs.value[6].enable = false;
        } else if (index == 5) {
            configs.value[3].enable = false;
            configs.value[4].enable = false;
            configs.value[6].enable = false;
        } else if (index == 6) {
            configs.value[3].enable = false;
            configs.value[4].enable = false;
            configs.value[5].enable = false;
        }
    }
    store.commit('updateConfig', allconfig);
}

const init = ()=>{
    // 界面设置选中
    configs.value[0].isChecked = true;
    // 数组添加选中信息
    config.push(0);
    // 后台保存选中的参数
    let allconfig = [];
    allconfig.push(configs.value[0].value);
    store.commit('updateConfig', allconfig);
}

init();
</script>

<template>
    <div class="main_layout">
        <div class="config_item" v-for="(config, index) in configs" v-bind:key="index">
            <el-checkbox  v-model="config.isChecked" class="config_checkbox" label="  " size="large" @change="(e)=>(CheckStatus(e, index))" :disabled="!config.enable"/>
            <span style="line-height: 30px;">{{ config.title }}</span>
            <div class="config_explanation">
                {{ config.explanation }}
            </div>
        </div>
    </div>
</template>

<style scope>
.main_layout {
    padding: 14px;
    margin: 0;
}
.config_explanation{
    border: 1px var(--switch-button-border-color) solid;
    padding: 12px;
    border-radius: 4px;
    background: var(--plugin-explanation-background-color);
    opacity: 0.7;
    font-family: PingFang SC;
    font-size: 12px;
    font-weight: normal;
    line-height: 20px;
    letter-spacing: 0px;
}
.config_item{
    margin-top: 14px;
}

.el-checkbox__inner {
    background: transparent !important;
    border-color: var(--switch-button-border-color) !important;
}

.el-checkbox__input.is-disabled {
    background: var(--checkbox-disable-color);
}
</style>